<template>
    <!--
    功能:
        使用v-on绑定事件.
    -->
    <div>
        <button v-on:click="add">加1</button>
        <button v-on:click="sub">减1</button>
        <button v-on:click="sub(2)">减2</button>
        <button v-on:click="sub2(3, $event)">减3</button>
        <h1>{{ number }}</h1>

        <div>
            <ul>
                <li v-for="(item, index) in objArr" v-bind:key="index">姓名: {{ item.name }}, 年龄: {{ item.age }}, 性别" {{  item.sex  }}</li>
            </ul>
            <input type="text" v-model="rmIndex" />
            <button @click="removeByIndex">删除</button>
            <button @click="update">更新</button>
        </div>

        <div>
            <ul>
                <li v-for="(value, key, index) in obj" v-bind:key="index">{{ key }} - {{ value }}</li>
            </ul>
            <button @click="removeAttr">删除age属性</button>
            <button @click="addAttr">新增address属性</button>
            <button @click="updateAttr">修改name属性</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Event",
        data() {
          return {
              rmIndex: '',
              number: 1,
              objArr: [
                  {
                      name: '张三1',
                      age: 18,
                      sex: '男'
                  },
                  {
                      name: '张三2',
                      age: 28,
                      sex: '女'
                  },
                  {
                      name: '张三3',
                      age: 38,
                      sex: '男'
                  }
              ],
              obj: {
                  name: '张三311',
                  age: 381,
                  sex: '男1',
                  id: 1
              }
          };
        },
        methods: {
            //事件触发时默认会携带一个event参数表示触发的事件是什么.
            add(event) {
                //写成`console.log()`会报错, 这个错误是Vuejs - 使用ESLint检查代码质量是进行提示的
                window.console.log(event);
                this.number++;
            },
            sub: function (number) {
                //之所以有这个判断是因为如果事件函数没有参数时, 就会默认把时间参数传入.
                if(typeof number === 'number') {
                    this.number -= number;
                    return;
                }
                this.number--;
            },
            //如果要传递事件参数, 就需要从处发出传入`$event`表示事件参数.
            sub2: function (number, event) {
                window.console.log(event);
                this.sub(number);
            },
            removeByIndex: function () {
                if(this.rmIndex === '') {
                    return;
                }
                let realIndex = parseInt(this.rmIndex) - 1;
                this.objArr.splice(realIndex, 1);
                this.rmIndex = '';
            },
            update: function () {
                let realIndex = parseInt(this.rmIndex) - 1;
                //此函数的功能是: 删除第realIndex位上的元素开始的第二个参数个元素, 然后将第三个参数替换到该位置.
                this.objArr.splice(realIndex, 1, {
                    name: 's三4',
                    age: 48,
                    sex: '男'
                });
            },
            removeAttr: function () {
                // eslint-disable-next-line no-unused-vars
                let tempObj = this.obj;
                // 直接`delete this.obj.age`是删不掉的
                delete tempObj.age;
                this.obj = {
                    //这是es6的新语法, 表示赋值对象的属性当当前对象汇总
                    ...tempObj
                };

                //这样也可以直接删除, 但是视频上说是不可以直接删除
                delete this.obj.id;
            },
            updateAttr: function () {
                this.obj.name = '大王';
            },
            addAttr: function () {
                //这样也可以实现, 但是视频上说不可以
                this.obj.aop = 'aop';

                this.obj = {
                    //这是es6的新语法, 表示赋值对象的属性当当前对象汇总
                    ...this.obj,
                    address: '延安'
                }
            }
        }
    }
</script>

<style scoped>

</style>